
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
     <link rel="stylesheet" href="/static/css/bootstrap-3.4.1-dist/css/bootstrap.css">
</head>
<body>
        <div class="panel panel-default">
          <div class="panel-heading">
              网上教室预约系统
              <div class="dropdown" style="float: right">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    {{data.username}}
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="/">退出</a></li>
  </ul>
</div>
          </div>
          <div class="panel-body">
                <ul class="nav nav-tabs">
        <li role="presentation"><a href="/room/info">教室信息查询</a></li>
        <li role="presentation"><a href="/room/res">预约记录查询</a></li>
        <li role="presentation"><a href="/user/info">个人信息修改</a></li>
        <li role="presentation" ><a href="/">退出登录</a></li>
    </ul>
              <div>
                  <h3>预约教室查询</h3>
              </div>
               <table class="table">
      <thead>
        <tr>
          <th>教室编号</th>
          <th>教室名称</th>
          <th>详细信息</th>
          <th>预约时间</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
            {%for item in data.data%}
                <tr>
                    <td>{{item['room_number']}}</td>
                    <td>{{item['room_name']}}</td>
                    <td>{{item['room_info']}}</td>
                    <td>{{item['res_date']}}</td>
                    <td><button data-toggle="modal" data-target="#myModal"  type="button" class="btn btn-xs btn-warning">取消预约</button></td>
                </tr>
            {%endfor%}
      </tbody>
    </table>
          </div>
        </div>


<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">提示</h4>
      </div>
      <div class="modal-body">
        是否确定取消预约?
      </div>
      <form action="/room/res" method="post">
          <div class="modal-footer">
              <input id="setRoomNumber" style="display: none" name="getRoomNumber">
        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
        <button type="submit" class="btn btn-primary">确定</button>
      </div>
      </form>
    </div>
  </div>
</div>


</body>

<style>
    body{
        background-color: #a6e1ec;
    }
    .panel{
        width: 900px;
        margin-top: 50px;
        margin-left: 300px;
    }
</style>

<script src="/static/js/jquery-3.5.1.min.js"></script>
<script src="/static/js/bootstrap.min.js"></script>

<script>
        $('.btn-warning').on('click',function (){
        const currentRow = $(this).closest('tr');
        window.room_number = currentRow.find('td:eq(0)').text()
        document.getElementById('setRoomNumber').value = window.room_number
    })

</script>


</html>